<template>
  <!-- 查询条件 -->
  <div>
    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 1000px"
      :inline="true"
    >
      <el-form-item label="姓名">
        <el-input v-model="page.firstName" style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item
        label="部门"
        prop="employmentStatus"
        style="width: 200px"
        placeholder="--请选择--"
      >
        <el-select v-model="page.department">
          <el-option label="策划部" :value="1" />
          <el-option label="秘书部" :value="2" />
          <el-option label="财务部" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="员工状态">
        <el-select
          v-model="page.employmentStatus"
          placeholder="--请选择--"
          style="width: 150px"
        >
          <el-option label="适用员工" :value="1" />
          <el-option label="在职员工" :value="2" />
          <el-option label="实习员工" :value="3" />
          <el-option label="临时工人" :value="4" />
          <el-option label="调至员工" :value="5" />
          <el-option label="专家顾问" :value="6" />
          <el-option label="返聘人员" :value="7" />
        </el-select>
        &nbsp;&nbsp; &nbsp;&nbsp;
        <el-button type="danger" @click="listAll">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 列表显示 -->
  <el-table
    :header-cell-style="{
      height: '100px',
      fontSize: '15px',
      color: 'black',
      backgroundColor: 'antiquewhite',
    }"
    :data="tableData"
    border
    style="width: 100%"
  >
    <el-table-column prop="employeeId" label="员工编号" />
    <el-table-column prop="firstName" label="姓名" />
    <el-table-column prop="department" label="部门"> </el-table-column>
    <el-table-column prop="phoneNumber" label="联系方式" />
    <el-table-column prop="employmentStatus" label="员工状态" />
  </el-table>
  <el-pagination
    v-model:current-page="page.pageIndex"
    v-model:page-size="page.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
//调用持久化
const route = useRoute();
const router = useRouter();
//生命周期 钩子函数
onMounted(() => {
  listAll();
});

const page = reactive({
  firstName: "",
  department: "",
  employmentStatus: "",
  pageIndex: 1,
  pageSize: 6,
  totalPage: 0,
  totalCount: 0,
});

//列表显示
const tableData = ref([]);
const listAll = () => {
  axios
    .post("http://localhost:5012/api/RBACs/Handle1", {
      firstName: page.firstName,
      department: page.department || 0,
      employmentStatus: page.employmentStatus || 0,
      pageIndex: page.pageIndex,
      pageSize: page.pageSize,
    })
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data;
      page.totalPage = res.data.totalPage;
      page.totalCount = res.data.totalCount;
    })
    .catch((err) => {
      console.log(err);
    });
};
//分页
const handleSizeChange = (val: number) => {
  console.log(val);
  page.pageSize = val;
  listAll();
};
const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  listAll();
};
</script>
